<template>
	<view class="container">
		<view class="list">
			<view class="list_item">
				<text>联系人</text>
				<input type="text" value="" placeholder="请输入您的姓名" v-model="name" />
			</view>
			<view class="list_item">
				<text>联系方式</text>
				<input type="number" value="" placeholder="请输入联系方式" v-model="mobile" />
			</view>
			<view class="list_item">
				<text>省/市/区</text>
				<view @click="showAddress">
					{{ places.length ? places.join('-') : '请选择地点'}}
				</view>
			</view>
			<view class="list_item">
				<text>详细地址</text>
				<input type="text" value="" placeholder="请输入详细地址" v-model="address" />
			</view>
			<view class="list_item">
				<text>加盟类型</text>
				<!-- <input type="text" value="" placeholder="请输入详细地址" placeholder-style="text-align: right"/> -->
				<view class="dan">
					<label class="radio">
						<radio :checked="join_type === '1'" color="#34ACEF" @click="radio('1')" />
						<text @click="radio('1')">个人</text>
					</label>
					<label class="radio">
						<radio :checked="join_type === '2'" color="#34ACEF" @click="radio('2')" />
						<text @click="radio('2')">公司</text>
					</label>
				</view>
			</view>
		</view>

		<view class="btn">
			<button type="default" @click="submit">确认</button>
		</view>
		<jc-address-picker :level='level' :places='places' :visible.sync='visible' @change='change'></jc-address-picker>
	</view>
</template>

<script>
	import jcAddressPicker from '@/components/jc-address-picker/jc-address-picker.vue'
	import {
		league
	} from '../../../api/api.js'
	export default {
		components: {
			jcAddressPicker
		},
		data() {
			return {
				// key: value
				places: [],
				visible: false,
				level: 3,
				name: '',
				mobile: '',
				address: '',
				join_type: '1'

			}
		},
		mounted() {

		},
		methods: {
			submit() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '提交成功'
				// })

				if (!this.name) {
					uni.showToast({
						icon: 'none',
						title: '请填写联系人姓名'
					})
					return
				}

				console.log((/^1(3|4|5|6|7|8|9)d{9}$/.test(this.mobile)))

				if ((/^1(3|4|5|6|7|8|9)d{9}$/.test(this.mobile)) === true) {
					uni.showToast({
						icon: 'none',
						title: '请填写正确的手机号码'
					})
					return
				}
				if (this.places.length != 3) {
					uni.showToast({
						icon: 'none',
						title: '请选择省市区'
					})
					return
				}
				if (!this.address) {
					uni.showToast({
						icon: 'none',
						title: '请填写详细地址'
					})
					return
				}
				if (!this.join_type) {
					uni.showToast({
						icon: 'none',
						title: '请选择加盟类型'
					})
					return
				}

				let data = {
					name: this.name,
					mobile: this.mobile,
					province: this.places[0],
					city: this.places[1],
					area: this.places[2],
					detail: this.address,
					join_type: this.join_type,
					client_type: '1'
				}
				league(data).then(res => {
					console.log(res)
					if (res.data == 1) {
						uni.showToast({
							icon: 'none',
							title: '提交成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			change(data) {
				this.places = data.map(i => i.name);
			},
			radio(checked) {
				console.log(checked)
				this.join_type = checked
			},
			showAddress() {
				this.visible = true;
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: calc(100% - 30upx);
		padding-top: 30upx;
		background-color: #f6f6f6;
	}

	.list {
		width: 100%;
		background-color: #FFFFFF;

		.list_item {
			width: 90%;
			height: 90upx;
			line-height: 90upx;
			margin: 0 auto;
			border-bottom: 1upx solid #f3f3f3;
			display: flex;
			justify-content: space-between;

			text {
				width: 150upx;
			}

			view {
				color: #777;
			}

			input {
				min-width: 30%;
				height: 100%;
				text-align: right;
				color: #777;
			}

			.dan {
				width: calc(100% - 150upx);
				color: #777;

				.radio {
					margin-right: 10upx;

					radio {
						transform: scale(0.8);
					}
				}

			}

		}
	}

	.btn {
		width: calc(100% - 60upx);
		height: 90upx;
		margin: 100upx auto;

		button {
			width: 100%;
			height: 100%;
			background-color: #3fb8ff;
			color: #FFFFFF;
			border-radius: 45upx;
		}
	}
</style>
